<template>
  <div
    class="fixed bottom-[20px] right-[20px] z-[1000] transition-all duration-300 ease [&]:hover:translate-y-[-2px]"
  >
    <button
      @click="handleToggle"
      class="btn p-[12px] size-[48px] rounded-[16px] shadow-[0px_4px_8px_0px_#00000014]"
      style="--btn-bg: #fff"
    >
      <CircleSvg class="size-[24px]" :fontControlled="false" filled />
    </button>
  </div>
</template>

<script setup>
import CircleSvg from "~/assets/icons/circle.svg";
const isVisible = defineModel("isVisible", {
  default: false,
});

const emit = defineEmits(["toggle"]);

const handleToggle = () => {
  isVisible.value = !isVisible.value;
  emit("toggle");
};
</script>

<style scoped>
.chat-toggle-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.chat-toggle-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.tooltip {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
</style>
